<template>
  <div class="model-square-container">
    <el-row :gutter="20" class="modelSquare">
      <el-col :span="7" class="left-panel">
        <el-card class="enhanced-card">
          <!-- 卡片头部 -->
          <div class="card-header">
            <div class="header-icon">
              <Icon icon="ep:collection" />
            </div>
            <div class="header-content">
              <h3 class="card-title">模板广场</h3>
              <p class="card-subtitle">选择合适的流程模板</p>
            </div>
          </div>

          <el-tabs v-model="activeName" class="enhanced-tabs" @tab-click="handleTabClick">
            <!-- 搜索框 -->
            <div class="search-container">
              <el-input class="search-input" placeholder="输入模板名称查询" v-model="searchVal">
                <template #prefix>
                  <Icon icon="ep:search" class="search-prefix-icon" />
                </template>
                <template #append>
                  <el-button class="search-btn" :icon="Search" />
                </template>
              </el-input>
            </div>

            <el-tab-pane label="CRM" name="crm" class="tab-pane">
              <div class="tab-label">
                <Icon icon="ep:user" class="tab-icon" />
                <span>CRM</span>
              </div>
              <el-scrollbar class="enhanced-scrollbar">
                <ul class="template-list">
                  <li
                    v-for="item in filteredCrm"
                    :key="item.id"
                    :class="{ selected: item.id == crmId }"
                    @click.stop="handleCrmLiClick(item)"
                    class="template-item"
                  >
                    <div class="item-content">
                      <div class="item-info">
                        <span class="item-name">{{ item.name }}</span>
                        <span class="item-time">{{ formatDate(item.createTime) }}</span>
                      </div>
                      <div class="item-actions">
                        <el-button
                          type="primary"
                          plain
                          @click.stop="handleUse(item)"
                          :disabled="item.used"
                          class="use-btn"
                          size="small"
                        >
                          <Icon :icon="item.used ? 'ep:check' : 'ep:plus'" class="btn-icon" />
                          {{ item.used ? '已使用' : '使用' }}
                        </el-button>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-empty description="暂无数据" v-if="crm.length == 0" class="enhanced-empty" />
              </el-scrollbar>
            </el-tab-pane>

            <el-tab-pane label="OA" name="oa" class="tab-pane">
              <div class="tab-label">
                <Icon icon="ep:office-building" class="tab-icon" />
                <span>OA</span>
              </div>
              <el-scrollbar class="enhanced-scrollbar">
                <ul class="template-list">
                  <li
                    v-for="item in filteredOa"
                    :key="item.id"
                    :class="{ selected: item.id == oaId }"
                    @click.stop="handleOaLiClick(item)"
                    class="template-item"
                  >
                    <div class="item-content">
                      <div class="item-info">
                        <span class="item-name">{{ item.name }}</span>
                        <span class="item-time">{{ formatDate(item.createTime) }}</span>
                      </div>
                      <div class="item-actions">
                        <el-button
                          type="primary"
                          plain
                          @click.stop="handleUse(item)"
                          :disabled="item.used"
                          class="use-btn"
                          size="small"
                        >
                          <Icon :icon="item.used ? 'ep:check' : 'ep:plus'" class="btn-icon" />
                          {{ item.used ? '已使用' : '使用' }}
                        </el-button>
                      </div>
                    </div>
                  </li>
                </ul>
                <el-empty description="暂无数据" v-if="oa.length == 0" class="enhanced-empty" />
              </el-scrollbar>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>

      <el-col :span="17" class="right-panel">
        <div class="viewer-container">
          <!-- 查看器头部 -->
          <div class="viewer-header">
            <div class="header-icon">
              <Icon icon="ep:view" />
            </div>
            <div class="header-content">
              <h4 class="viewer-title">流程预览</h4>
              <p class="viewer-subtitle">查看流程图详细信息</p>
            </div>
          </div>

          <div class="viewer-content">
            <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML as any" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox } from 'element-plus'
import * as ModelSquareApi from '@/api/bpm/modelSquare'
import { formatDate } from '@/utils/public'
import { Search, User, Setting } from '@element-plus/icons-vue'
import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
const activeName = ref('crm')
const handleTabClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.props.name as string
  if (activeName.value == 'oa') {
    handleOaLiClick(oa.value[0])
  } else {
    handleCrmLiClick(crm.value[0])
  }
  searchVal.value = ''
}

const crmId = ref()
const handleCrmLiClick = (item) => {
  crmId.value = item.id
  handleBpmnDetail(item.modelId)
}
const oaId = ref()
const handleOaLiClick = (item) => {
  oaId.value = item.id
  handleBpmnDetail(item.modelId)
}

const crm = ref([])
const oa = ref([])
/** 获取列表数据 */
const getListData = async () => {
  const data = await ModelSquareApi.getList()
  crm.value = data.filter((item) => {
    return item.category === 3
  })
  oa.value = data.filter((item) => {
    return item.category === 2
  })
}

/** 查询 */
const searchVal = ref('')
const filteredCrm = computed(() => {
  if (!searchVal.value) return crm.value
  return crm.value.filter((item) => item.name.toLowerCase().includes(searchVal.value.toLowerCase()))
})
const filteredOa = computed(() => {
  if (!searchVal.value) return oa.value
  return oa.value.filter((item) => item.name.toLowerCase().includes(searchVal.value.toLowerCase()))
})

/** 获取流程图 */
const bpmnXML = ref('') // BPMN 数据
const handleBpmnDetail = async (id) => {
  const data = await ModelSquareApi.getXML(id)
  bpmnXML.value = data || ''
}

/**使用 */
const handleUse = (item) => {
  ElMessageBox.confirm(`确认使用 "${item.name}" 的模板吗?`, '确认使用', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const data = await ModelSquareApi.active({ key: item.modelKey })
      ElMessage({
        type: 'success',
        message: '已使用！'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消！'
      })
    })
}

/** 初始化 **/
onMounted(async () => {
  await getListData()
  handleCrmLiClick(crm.value[0])
})
</script>

<style lang="scss" scoped>
// 主题色变量
$primary-color: #0052cc;
$primary-light: rgba(0, 82, 204, 0.1);
$primary-border: rgba(0, 82, 204, 0.3);
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #c0c4cc;
$border-color: #dcdfe6;
$border-light: #e4e7ed;
$bg-color: #f5f7fa;
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$border-radius: 12px;
$border-radius-small: 8px;

.model-square-container {
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;

  @media (max-width: 768px) {
    padding: 8px;
  }
}

.modelSquare {
  font-size: var(--el-font-size-base);

  @media (max-width: 768px) {
    flex-direction: column;

    .left-panel {
      width: 100% !important;
      margin-bottom: 16px;
    }

    .right-panel {
      width: 100% !important;
    }
  }
}

/* 左侧面板样式 */
.enhanced-card {
  border-radius: $border-radius;
  overflow: hidden;
  box-shadow: $shadow-light;
  border: 1px solid $border-light;
  background: white;

  :deep(.el-card__body) {
    padding: 0;
  }
}

.card-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  color: white;
  border-bottom: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 16px 20px;
  }
}

.header-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: $border-radius-small;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

.header-content {
  flex: 1;
  margin-left: 12px;

  @media (max-width: 768px) {
    margin-left: 10px;
  }
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.card-subtitle {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 搜索区域样式 */
.search-container {
  padding: 20px 24px 16px;
  background: white;
  border-bottom: 1px solid $border-light;

  @media (max-width: 768px) {
    padding: 16px 20px 12px;
  }
}

.search-input {
  :deep(.el-input__wrapper) {
    border-radius: $border-radius-small;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;

    &:hover {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.1);
    }

    &.is-focus {
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }
  }

  :deep(.el-input-group__append) {
    border-radius: 0 $border-radius-small $border-radius-small 0;
  }
}

.search-prefix-icon {
  color: $text-secondary;
  font-size: 14px;
}

.search-btn {
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  border: none;
  color: white;
  transition: all 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }
}

/* 标签页样式 */
.enhanced-tabs {
  :deep(.el-tabs__header) {
    margin: 0;
    background: white;
    padding: 0 24px;
    border-bottom: 2px solid $border-light;

    @media (max-width: 768px) {
      padding: 0 20px;
    }
  }

  :deep(.el-tabs__nav-wrap) {
    &::after {
      display: none;
    }
  }

  :deep(.el-tabs__item) {
    font-weight: 500;
    color: $text-regular;
    padding: 16px 20px;
    transition: all 0.3s ease;

    &:hover {
      color: $primary-color;
    }

    &.is-active {
      color: $primary-color;
      font-weight: 600;
    }

    @media (max-width: 768px) {
      padding: 12px 16px;
      font-size: 14px;
    }
  }

  :deep(.el-tabs__active-bar) {
    background: $primary-color;
    height: 3px;
    border-radius: 2px;
  }
}

.tab-label {
  display: none;
}

/* 滚动条样式 */
.enhanced-scrollbar {
  height: 500px;
  padding: 16px 24px;

  @media (max-width: 768px) {
    height: 400px;
    padding: 12px 20px;
  }

  :deep(.el-scrollbar__bar) {
    .el-scrollbar__thumb {
      background: rgba(0, 82, 204, 0.3);
      border-radius: 4px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(0, 82, 204, 0.5);
      }
    }
  }
}

/* 模板列表样式 */
.template-list {
  padding: 0;
  margin: 0;
  list-style: none;

  .template-item {
    margin-bottom: 12px;
    border-radius: $border-radius-small;
    background: #fafbff;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;

    &:hover {
      border-color: $primary-border;
      background: $primary-light;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.15);
    }

    &.selected {
      border-color: $primary-color;
      background: $primary-light;
      box-shadow: 0 4px 12px rgba(0, 82, 204, 0.2);
    }

    @media (max-width: 768px) {
      margin-bottom: 8px;
    }
  }
}

.item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;

  @media (max-width: 768px) {
    padding: 12px;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;

  @media (max-width: 768px) {
    gap: 2px;
  }
}

.item-name {
  font-size: 14px;
  font-weight: 600;
  color: $text-primary;
  line-height: 1.4;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.item-time {
  font-size: 12px;
  color: $text-secondary;
  font-family: 'Courier New', monospace;

  @media (max-width: 768px) {
    font-size: 11px;
  }
}

.item-actions {
  display: flex;
  align-items: center;
  margin-left: 12px;

  @media (max-width: 768px) {
    margin-left: 0;
    justify-content: center;
  }
}

.use-btn {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;

  &:not(:disabled) {
    &:hover {
      transform: scale(1.05);
      box-shadow: 0 2px 8px rgba(0, 82, 204, 0.3);
    }
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  @media (max-width: 768px) {
    font-size: 12px;
    padding: 6px 12px;
  }

  .btn-icon {
    font-size: 12px;
  }
}

/* 空状态样式 */
.enhanced-empty {
  :deep(.el-empty__image) {
    width: 80px;
    height: 80px;
  }

  :deep(.el-empty__description) {
    color: $text-secondary;
    font-size: 13px;
  }
}

/* 右侧查看器样式 */
.viewer-container {
  background: white;
  border-radius: $border-radius;
  overflow: hidden;
  box-shadow: $shadow-light;
  border: 1px solid $border-light;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;

  @media (max-width: 768px) {
    height: 500px;
  }
}

.viewer-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
  border-bottom: 1px solid $border-light;
  flex-shrink: 0;

  @media (max-width: 768px) {
    padding: 16px 20px;
  }

  .header-icon {
    width: 40px;
    height: 40px;
    background: $primary-color;
    border-radius: $border-radius-small;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;

    @media (max-width: 768px) {
      width: 36px;
      height: 36px;
      font-size: 16px;
    }
  }

  .header-content {
    flex: 1;
    margin-left: 12px;

    @media (max-width: 768px) {
      margin-left: 10px;
    }
  }

  .viewer-title {
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    margin: 0 0 2px 0;

    @media (max-width: 768px) {
      font-size: 14px;
    }
  }

  .viewer-subtitle {
    font-size: 13px;
    color: $text-secondary;
    margin: 0;

    @media (max-width: 768px) {
      font-size: 12px;
    }
  }
}

.viewer-content {
  flex: 1;
  overflow: hidden;
  background: white;
  position: relative;

  :deep(.bpmn-viewer) {
    width: 100%;
    height: 100%;
  }
}

/* 响应式优化 */
@media (max-width: 480px) {
  .model-square-container {
    padding: 4px;
  }

  .card-header,
  .viewer-header {
    padding: 12px 16px;
  }

  .search-container {
    padding: 12px 16px 8px;
  }

  .enhanced-scrollbar {
    height: 300px;
    padding: 8px 16px;
  }

  .item-content {
    padding: 8px;
  }

  .viewer-container {
    height: 400px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .model-square-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .enhanced-card,
  .viewer-container {
    background: #374151;
    border-color: #4b5563;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }

  .search-container,
  .viewer-content {
    background: #374151;
  }

  .viewer-header {
    background: #4b5563;
    border-color: #6b7280;
  }

  .card-title,
  .viewer-title {
    color: #f9fafb;
  }

  .item-name {
    color: #f9fafb;
  }

  .template-item {
    background: #4b5563;
    border-color: transparent;

    &:hover {
      background: rgba(96, 165, 250, 0.1);
      border-color: rgba(96, 165, 250, 0.3);
    }

    &.selected {
      border-color: #60a5fa;
      background: rgba(96, 165, 250, 0.1);
    }
  }

  .enhanced-tabs {
    :deep(.el-tabs__header) {
      background: #374151;
      border-color: #4b5563;
    }

    :deep(.el-tabs__item) {
      color: #d1d5db;

      &.is-active {
        color: #60a5fa;
      }
    }

    :deep(.el-tabs__active-bar) {
      background: #60a5fa;
    }
  }
}
</style>
